<template>
    <view class="container">
        <u-navbar :autoBack="true" leftIconSize="28" bgColor="rgba(0,0,0,0.0)" leftIconColor="#fff" :fixed="true" @leftClick="leftClick">
        </u-navbar>
        <view class="banner">
            <u-swiper :current="current" :list="[datas.image]" indicator indicatorMode="line" autoplay circular height="500"
                imgMode="heightFix"></u-swiper>
        </view>
        <view class="main">
            <view class="name">{{datas.name}}</view>
            <view class="text">所用调料：</view>
            <view>
                {{datas.flavour || '暂无'}}
            </view>
            <view class="text">所用食材：</view>
            <view>
                {{datas.ingredient || '暂无'}}
            </view>
            <view class="text">制作方法：</view>
            <rich-text :nodes='datas.practice'>
            </rich-text>
        </view>
    </view>
</template>

<script>
import menu from './menu'
export default {
    data() {
        return {
            datas: {},
        }
    },
    methods: {
    },
    onLoad(option) {
        this.datas = menu[option.key][option.index]
        console.log(this.datas);
    }
}
</script>

<style lang="scss" scoped>
.banner {
    width: 100%;
}

.main {
    padding: 0 40rpx;
}
.longMarch {
    padding: 40rpx 0rpx;
    .titleText {
        font-size: 52rpx;
        font-family: monospace;
        font-weight: 600;
    }
    .conText {
        text-indent: 56rpx;
        line-height: 2;
        color: #767676;
        font-size: 30rpx;
    }
    view {
        padding: 20rpx 0;
    }
}

.name {
    margin: 16rpx 0;
    font-size: 48rpx;
    font-weight: 600;
}

.title {
    font-size: 36rpx;
    margin-bottom: 40rpx;
    font-weight: 600;
}

.text {
    font-size: 34rpx;
    font-weight: 700;
    line-height: 55rpx;
    margin-top: 20rpx;
    margin-bottom: 10rpx;
}

.desc {
    font-size: 28rpx;
    line-height: 55rpx;
}

.pagel {
    width: 150rpx;
    height: 60rpx;
    border-radius: 60rpx;
    opacity: 1;
    text-align: center;
    line-height: 60rpx;
    color: #965e25;
    background: #f4e9de;
}
</style>